<template>
	<Echart :options="options" />
</template>

<script>
import Echart from '../../components/echart';

const _colors = ['#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293'];
export default {
    components: {
        Echart,
    },
    props: {
        cdata: { type: Array, default: () => [] },
    },
    data() {
        return {
            options: {
                grid: {
                    left: '18%',
                },
                dataset: {
                    dimensions: ['equipCode', 'performanceRate'],
                    source: [],
                },
                xAxis: {
                    type: 'value',
                },
                yAxis: {
                    type: 'category',
                    alignTicks: true,
                    axisLabel: {
                        interval: 0,
                    },
                },
                series: [
                    {
                        type: 'bar',
                        label: {
                            show: true,
                            formatter: function (params) {
                                const rate = params.data.performanceRate;
                                return rate < 0.001 ? 0 : `${(rate * 100).toFixed(1)}%`;
                            },
                            position: 'inside',
                        },
                        itemStyle: {
                            color: function (params) {
                                return _colors[params.dataIndex % _colors.length];
                            }
                        }
                    },
                ]
            },
        };
    },
    watch: {
        cdata: {
            handler(newData) {
                this.options.dataset.source = newData;
            }
        }
    },
}
</script>
